<template>
  <div class="container">
    <el-container class="content">
      <el-aside class="aside" width="200px">
        <div class="actions">
          <div
            class="action item-pub"
            :active="aside_sel == 0"
            @click="action_click(0)"
          >
            {{ t("账户资料") }}
          </div>
          <div
            class="action item-pub"
            :active="aside_sel == 1"
            @click="action_click(1)"
          >
            {{ t("收货地址") }}
          </div>
          <div
            class="action item-pub"
            :active="aside_sel == 2"
            @click="action_click(2)"
          >
            {{ t("常见问题") }}
          </div>
        </div>
      </el-aside>
      <el-main class="main">
        <div class="head-title">{{ head_title }}</div>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aside_sel: 0,
      head_title: this.t("您的基础信息"),
    };
  },
  mounted() {
    this.action_click(this.$route.query.aside);
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`账户资料.${v}`);
    },
    action_click(idx) {
      if (idx == 0) {
        this.$router
          .push({
            name: "accountPerson",
            query: {
              aside: 0,
            },
          })
          .catch(() => {});
        this.head_title = this.t("您的基础信息");
      } else if (idx == 1) {
        this.$router
          .push({
            name: "address",
            query: {
              aside: 1,
            },
          })
          .catch(() => {});
        this.head_title = this.t("新增收货地址");
      } else if (idx == 2) {
        this.$router
          .push({
            name: "questionList",
            query: {
              aside: 2,
            },
          })
          .catch(() => {});
        this.head_title = "";
      }
      this.aside_sel = idx;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px 110px 0px;
  background: #f9f9f9;

  .content {
    .aside {
      padding: 0px 10px;
      border-radius: 10px;
      background: #fff;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      height: fit-content;

      .actions {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 0px;

        .item-pub {
          margin-bottom: 20px;
          width: 100%;
          line-height: 42px;
          font-size: 20px;
          user-select: none;
          border-radius: 4px;
          text-indent: 20px;
        }

        .action {
          color: #222;
          background: #fff;
        }

        .action[active="true"] {
          color: #fff;
          background: #ff5757;
        }
      }
    }

    .main {
      height: calc(100vh - 110px);
      margin-left: 50px;
      border-radius: 10px;
      background: #fff;
      padding: 40px 50px 0px;
      box-sizing: border-box;

      .head-title {
        font-weight: blod;
        font-size: 22px;
        color: #0a0a0b;
      }
    }
  }
}
</style>
